import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Button } from 'antd'
import { PlaySquareOutlined } from '@ant-design/icons'
import DrawerCondition from '@/components/DrawerCondition';
import SelectVideo from './components/TaskModel'
import './index.less'
import { useState } from 'react';
const TaskDrawer = (props) => {
  const { dispatch, visible = {}, onClose, loading, goodsId, handleCallback, defaultSelectList = [] } = props;

  const { show = false, detail = {} } = visible;
  const { id, sectionId } = detail;
  const [videoVisible, setVideoVisible] = useState(false)

  const handleTask = (selectList) => {
    dispatch({
      type: 'liveStreaming/fakeSaveGoodsContent',
      payload: {
        goodsId,
        sectionId: sectionId,
        contentGoodsIdList: selectList
      },
      callback: () => {
        setVideoVisible(false);
        onClose()
        handleCallback()
      }
    })
  }
  const modalProps = {
    title: `添加任务`,
    visible: show,
    onClose,
  };

  return (
    <DrawerCondition {...modalProps}>
      <div className='TaskDrawer_box'>
        <div className='TaskDrawer_title'>内容</div>
        <div onClick={() => setVideoVisible({ show: true })} className='TaskDrawer_action'>
          <div className='TaskDrawer_action_btn'>
            <div className='TaskDrawer_action_btnLeft'><PlaySquareOutlined></PlaySquareOutlined></div>
            <div className='TaskDrawer_action_btnRight'>视频</div>
          </div>
        </div>
      </div>
      <SelectVideo defaultSelectList={defaultSelectList} handleTask={handleTask} visible={videoVisible} onClose={() => setVideoVisible(false)}></SelectVideo>
    </DrawerCondition>
  );
};

export default connect(({ institution, loading }) => ({
  loading: loading.models.institution,
}))(TaskDrawer);
